<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./node_modules//zrender/dist/zrender.min.js"></script>
  <style>
    #box{
      width: 600px;
      height: 600px;
      background-color: #eee;
    }

  </style>
</head>
<body>
  <div id="box" ></div>
</body>
</html>
<script>
  let zr = zrender.init(document.getElementById('box'));

  console.log(zrender.LinearGradien)
  let color = new zrender.LinearGradient(0,0,1,0,[
    {
      offset:0,
      color:'red'
    },
    {
      offset:1,
      color:'blue'
    }
  ])

  let rect = new zrender.Rect({
    shape:{
      // 形状
      x:10,
      y:10,
      width:50,
      height:50
    },
    style:{
      fill:color
    },
    position:[0,0] // 类似于 relative
  })
  rect.animateTo({
    position:[100,0]
  },1000,0,'linear')

  zr.add(rect);


  let line = new zrender.Line({
    shape:{
      x1:100,
      y1:100,
      x2:200,
      y2:200,
      percent:0
    },
    style:{
      stroke:'red',
      lineWidth:4
    }
  })
  let a = line.animate('shape',false).when(1000,{
    percent:1
  })
  box.onclick = function(){
    console.log(a)
    a.start()
    zr.add(line)
  }
  
</script>